<template>
	<s-layout title="查看群成员" :bgStyle="{
		color:'#F6F6F6'
	}">
	<view class="group-user">
		<view class="group-item">
			<view class="item" v-for="(row,index) in groupUserList" :key="index" @click="jumpUserInfo(row)">
				<image
					:src="cdn(row.avatar) || 'http://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/static/img/default_avatar.png'"
					mode="aspectFill"></image>
				<view class="item-name">
					{{row.nickname}}
				</view>
			</view>
		</view>
	</view>
	</s-layout>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	import {cdn,udid} from '@/im/config/index.js'
	import $store from '@/im/store/im';
	import imApi from '@/im/api/index.js'

	const groupUserList = ref([])
	const groupInfo = computed(() => $store().groupInfo);
	const iMMyInfo = computed(() => $store().userInfo);

	onLoad((opt) => {
		getMember()
	})

	const getMember = async () => {
		const {
			code,
			data
		} = await imApi.memberList({
			type: udid === 'hotel' ? 'hl' : udid,
			group_id: groupInfo.value.groupProfile.groupID,
		})
		if (code === 0) {
			groupUserList.value = data
		}
	}

	function jumpUserInfo(item) {
		if (item.im_id === iMMyInfo.value.userID) {
			return
		}
		$store().getFriendInfo(`C2C${item.im_id}`, 'group')
	}
</script>

<style lang="scss">
	.group-user {
		padding-top: 20rpx;

		.group-item {
			width: calc(100% - 80rpx);
			margin: 0 auto;
			background-color: #fff;
			padding: 20rpx;
			border-radius: 20rpx;
			display: flex;
			flex-wrap: wrap;

			.item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				flex-direction: column;
				width: 20%;

				image {
					width: 88rpx;
					height: 88rpx;
					border-radius: 50%;
				}

				.item-name {
					width: 88rpx;
					font-size: 28rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					text-align: center;
					margin-top: 10rpx;
					color: #666666;
				}
			}
		}
	}
</style>